<template>
    <div class="newsImg">
        <ul>
            <li v-for="item in imgList.list">
                <div class="newsImgTop" @click="pathGo(item)"><img :src="item.img_url1" alt="" /></div>
                <div class="newsImgBottom">
                    <div class="text">{{ item.title }}</div>
                    <div class="newsImgComment">
                        <span>{{ imgCount(item) }}&nbsp;</span>
                        <van-icon name="photo-o" />
                    </div>
                </div>
            </li>
        </ul>
    </div>
</template>
<script setup>
import { newsImgList } from "@/request/index";
import { useStore } from "vuex";
import { defineComponent, computed, onBeforeMount, reactive } from "vue";
import { useRouter } from "vue-router";
let store = useStore();
const router = useRouter();
let imgList = reactive({ list: [] });
onBeforeMount(() => {
    newsImgList().then((data) => {
        console.log(data);
        imgList.list = data.rows;
    });
});
const imgCount = (x) => {
    let y = 0;
    if (x.img_url1 != null) {
        y++;
    } else {
        return y;
    }
    if (x.img_url2 != null) {
        y++;
    } else {
        return y;
    }
    if (x.img_url3 != null) {
        y++;
        return y;
    } else {
        return y;
    }
};
const pathGo = (x) => {
    console.log(x.id);
    x.clicks++;
    router.push({ path: "/imgDetail", query: { id: x.id } });
};
</script>
<style lang="scss">
.newsImg {
    width: 100%;
    ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        li {
            border-radius: 10px;
            overflow: hidden;

            margin-bottom: 8px;
            width: 48%;
            height: 4.5867rem;

            .newsImgTop {
                height: 3.4667rem;
                background-color: lightblue;
                img {
                    height: 100%;
                    width: 100%;
                    object-fit: cover;
                }
            }
            .newsImgBottom {
                padding: 10px;
                height: 0.5333rem;
                background-color: rgba(0, 0, 0, 0.09);
                color: #333;
                font-weight: 100;
                .newsImgComment {
                    text-align: right;
                    font-size: 12px;
                    margin-top: -10px;
                }
            }
        }
    }
}
</style>
